<template>
  <div>
    <van-nav-bar
      title="标题"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />
    <div style="border: 1px">
      <van-swipe-cell>
        <van-card
          :desc="shoper.descrip"
          :title="shoper.name"
          class="goods-card"
          thumb="https://img01.yzcdn.cn/vant/cat.jpeg"
        />
      </van-swipe-cell>
    </div>

    <van-tree-select
      height="110vw"
      :items="items"
      :main-active-index.sync="active1"
      @click-nav="change"
    >
      <template #content>
        <van-card
          num="1"
          :price="i.price"
          :desc="i.description"
          :title="i.name"
          thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg"
          v-for="(i, index) in list1"
          :key="index"
        >
          <template #tags>
            <van-tag plain type="danger">销量500</van-tag>
          </template>
          <template #footer>
            <van-button size="mini" @click="buy(i['id'],i['flavors'])">购买</van-button>
          </template>
        </van-card>
      </template>
    </van-tree-select>

    

    <footers @listenTo="showMsg"></footers>

    <div>
      <van-dialog
        v-model="show"
        title="口味选择"
        show-cancel-button
        style="width: 50%"
        @confirm='submit'
      >
        <van-radio-group
          v-model="redio[index]"
          v-for="(i, index) in flavorlist"
          :key="index"
        >
          <van-radio :value='j' :name="j" v-for="(j,ind) in i" :key="ind">
            {{j}}
          </van-radio><br />
        </van-radio-group>
        <van-button>提交</van-button>
      </van-dialog>
    </div>
    <div>
      <van-action-sheet v-model="isshow" title="购物车">
        <ul>
          <li v-for="(item,ind) in cartlist" :key="ind">
            {{item.name}} {{item.price}} 
            <van-button @click="jiajian(item.id,2)">-</van-button>
            {{item.count}}
            <van-button @click="jiajian(item.id,1)">+</van-button>
          </li>
        </ul>
        商品数量:{{tcount}} 总价:{{tmoney}}
        <van-button @click="tijiao">提交订单</van-button>
    </van-action-sheet>
    </div>
  </div>
</template>

<script>
import FootView from "@/views/FootView.vue";
export default {
  components: {
    footers: FootView,
  },
  data() {
    return {
      shoper: {},
      items: [],
      list1: [],
      show: false,
      buyid:0,
      flavorlist:[],
      redio:[],
      type:1,
      isshow :false,
      cartlist :[],
      tmoney:0,
      tcount:0,
      active1:0,
    };
  },
  methods: {
    tijiao(){
      this.$router.push({path:'/submit'})
    },
    onClickLeft() {
      Toast("返回");
    },
    onClickRight() {
      Toast("按钮");
    },
    change(index) {
      this.getGoods(this.items[index]["id"]);
    },
    getShoper() {
      this.axios
        .get("/index/getShops")
        .then((resp) => {
          console.log("商家", resp);
          this.shoper = resp.data.shop;
        })
        .catch((err) => {
          console.log("商家", err);
        });
    },
    getCate() {
      this.axios
        .get("/index/getcate")
        .then((resp) => {
          console.log("分类", resp);
          this.items = resp.data.cate;
          this.getGoods(this.items[0]["id"]);
        })
        .catch((err) => {
          console.log("分类失败", err);
        });
    },
    getGoods(index) {
      this.axios
        .get("/index/getGoods?cateid=" + index)
        .then((resp) => {
          console.log("菜品", resp);
          this.list1 = resp.data.goods;
        })
        .catch((err) => {
          console.log("菜品失败", err);
        });
    },
    buy(id,flavor) {
      this.buyid = id
      this.redio = []
      if(flavor){
          this.show = true;
          console.log(flavor)
          this.flavorlist = flavor
          //选择口味
          console.log(this.flavorlist)
      }else{
        //调用加入购物车接口
        this.addcart()
      }
    },
    submit(){
      this.addcart()
    },
    jiajian(gid,type){
    this.axios.get('/index/jiajian?userid=211&gid='+gid+'&count=1&type='+type).then((res) => {

      this.getCart()
    })
    },
    addcart(){
      var flavors = JSON.stringify(this.redio)
      this.axios.get('/index/addcate?userid=211&gid='+this.buyid+'&count=1&type='+this.type+'&flavors='+flavors).then(res=>{
        console.log('添加',res)
        // this.isshow = true
        // this.getCate()
      })
    },
    getCart(){
      this.axios.get('/index/myshop?userid=211').then(resp=>{
        console.log('购物车',resp)
        this.cartlist = resp.data.clist
        this.tmoney = resp.data.tmoney
        this.tcount = resp.data.tcount
      })
    },
    showMsg(data){
      this.active1 = data
      console.log(data)
      if(this.active1==1){
        this.isshow = true
        this.getCart()
      }
      
    }
    
    
  },
  mounted() {
    this.getShoper();
    this.getCate();
  },
  
};
</script>

<style>
.van-nav-bar__content {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  height: 60px;
}

.goods-card {
  margin: 0;
  background-color: aliceblue;
}

.delete-button {
  height: 100%;
}
</style>